.container {
	--label-width: 6rem;
	--label-color: var(--color-text-0);
	--message-margin: 0;

	position: relative;
	display: flex;
	align-items: center;
	padding-bottom: 1.5rem;

	.label {
		width: var(--label-width);
		margin-right: 0.5rem;
		color: var(--label-color);
		white-space: nowrap;
		text-align: right;
		user-select: none;

		& > span {
			position: relative;
		}

		&.required > span::before {
			position: absolute;
			left: -1.25em;
			width: 1em;
			color: var(--color-error);
			text-align: right;
			content: '*';
		}
	}

	.field {
		position: relative;
		display: flex;
		flex: 1;
		align-items: center;
	}

	.message {
		position: absolute;
		bottom: -1.25em;
		margin: var(--message-margin, 0);
		padding: 0;
		font-size: var(--text-sm);
		line-height: 1;
		white-space: nowrap;
	}

	&.error {
		.message,
		.label {
			color: var(--color-error) !important;
		}
	}

	&.column {
		flex-direction: column;
		align-items: flex-start;

		.label {
			margin-bottom: 1rem;
			text-align: left;
		}

		.field {
			width: 100%;

			.message {
				margin-left: 0;
			}
		}
	}

	&.hidden {
		display: none;
	}
}
